<template>
<!-- 查看房屋信息 -->
    <div class="Housinginformation">
        <div class="homeinfomation">
            <!-- 查看房屋顶部信息 -->
            <div class="homeinformationheader">
                <div class="headerleft">
                    <p>赵小刚</p>
                    <el-select v-model="value" placeholder="业主" class="residence">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" >
                        </el-option>
                    </el-select>
                </div>
                <div class="headerright">
                    <span class="lastcode" @click="preve()">
                        <i class="el-icon-arrow-left"></i>
                    </span>
                    <span class="nextcode" @click="next()">
                        <i class="el-icon-arrow-right arrowright"></i>
                    </span>
                </div>
            </div>
            <div class="info">
                <div class="homeinformationfooter">
                    <p>
                        <span>手机号：</span>
                        13013001300
                    </p>
                    <p>
                        <span>身份证号：</span>
                        13209240249*****223232
                    </p>
                </div>
                <div class="homeinformationfooter">
                    <p>
                        <span>所属小区：</span>
                        万象城
                    </p>
                    <p>
                        <span>楼宇：</span>
                        1号楼1单元
                    </p>
                </div>
            </div>
        </div>
        <div class="homecontent">
            <!-- 房屋信息切换 -->
            <ul class="homecontentheader">
                <li :class="{'active':tabshow==index}" v-for="(item,index) in tabs" :key="index" @click="tab(n)">{{item}}</li>
                <!-- <li>房屋信息</li>
                <li>成员信息</li>
                <li>储藏室</li>
                <li>车位信息</li> -->
            </ul>
            <!-- 切换内容路由 -->
            <div class="homecountent">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '业主'
        }, {
          value: '选项2',
          label: '初步意向'
        }, {
          value: '选项3',
          label: '下次邀约'
        }],
        value: '',  //下拉选项框
        tabshow:1,  //tab切换
        tabs:['业主信息','房屋信息','成员信息','储藏室','车位信息']
      }
    },
    methods:{
        // tab切换
        tab(i){
            this.tabshow=i
        },
        // 顶部右上角上一条,下一条记录查询
        preve(){
            console.log("上一个")
            if(this.tabshow>1){
                this.tabshow--
            }else{
                this.tabshow=5
            }
        },
        next(){
            console.log("下一个")
            if(this.tabshow<5){
                 this.tabshow++     
            }else{
                this.tabshow=1
            }
            
        }
    }
}
</script>

<style lang="scss" scoped>
    .Housinginformation{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        // background-color: #fff;
        // 查看房屋信息顶部显示
        .homeinfomation{
            width: 100%;
            height: 170px;
            padding: 30px 25px 0 40px;
            background-color: rgba(255, 255, 255, 1);
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(233, 233, 233, 1);
            .homeinformationheader{
                height: 35px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .headerleft{
                    display: flex;
                    p{
                        font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                        font-weight: 700;
                        font-style: normal;
                        font-size: 18px;
                        color: #666;
                        margin-right: 15px;
                    }
                    .residence{
                        width: 96px;
                        ::v-deep .el-input__inner{
                            // width: 71px;
                            height: 35px;
                            text-align: center;
                            padding-left: 10px;
                            padding-right: 15px;
                            border: 1px solid rgba(228, 228, 228, 1);
                        }
                        
                    }
                    
                }
                .headerright{
                    width: 100px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    display: flex;
                    span{
                        display: inline-block;
                        width: 50px;
                        border: 1px solid rgba(228, 228, 228, 1);
                        border-radius: 5px;
                        cursor: pointer;
                        .arrowright{
                            font-size: 16px !important;
                        }
                    } 
                    span:hover{
                        border-color: #0079fe;
                        color: #0079fe;
                    }
                    & span:nth-child(1){
                        border-top-right-radius: 0px;
                        border-bottom-right-radius: 0px;
                        // border-right: 0.5px solid rgba(228, 228, 228, 1) !important;
                    }
                    & span:nth-child(2){
                        border-top-left-radius: 0px;
                        border-bottom-left-radius: 0px;
                        // border-left: 0.5px solid rgba(228, 228, 228, 1);;
                    }
                }
            }
            .info{
                margin-top: 10px;
            }
            .homeinformationfooter{
                width: 100%;
                height: 28px;
                margin-top: 15px;
                display: flex;
                align-items: center;
                p{
                    min-width: 148px;
                    font-size: 12px;
                    color: #666;

                }
            }
        }
        // 房屋信息tab切换
        .homecontent{
            width: 100%;
            background-color: #fff;
            .homecontentheader{
                width: 100%;
                height: 50px;
                border-bottom: 1px solid rgba(233, 233, 233, 1);
                box-sizing: border-box;
                display: flex;
                align-items: center;
                li{
                    width: 101px;
                    height: 100%;
                    line-height: 50px;
                    font-size: 14px;
                    color: #666666;
                    text-align: center;
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                    font-weight: 700;
                    position: relative;
                    cursor: pointer;
                }
                .active{
                    color: #0079fe ;
                }
                .active::after{
                    content: '';
                    width: 100%;
                    height: 2px;
                    background-color: #0079fe;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                }
            }
            // 房屋信息路由盒子
            .homecountent{
                width: 100%;
                height: 100%;
                padding-bottom: 50px;
                background-color: #fff;
            }
        }
    }
    
</style>